<template>
  <div class="container">
    <el-container>
      <el-header>
        <el-row class="title">更换手机号码</el-row>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="18" :offset="3">
            <ShopStep :data="stepsArr" :active="activeStep" />
          </el-col>
        </el-row>
        <div v-if="activeStep == 0">
          <el-row class="mar-top-30">
            <el-col :span="8" :offset="9">
              <span>已绑定的手机号码：{{ userInfo.phone }}</span>
            </el-col>
          </el-row>
          <el-row class="mar-top-30">
            <el-col class="flex-row-plus" :span="5" :offset="8">
              <el-input class="codeipt" v-model="phoneForm.verifyCode" maxlength="6" placeholder="验证码" oninput="value=value.replace(/[^\d]/g,'')" />
            </el-col>
            <el-col class="flex-row-plus" :span="3">
              <el-button
                v-if="codeSetting.isoldCodeShow"
                class="codebut"
                @click="getoldCode"
              >{{ codeSetting.oldcodeText }}</el-button
              >
              <el-button v-else class="codebut codeDisable">{{
                codeSetting.oldcodeText
              }}</el-button>
            </el-col>
          </el-row>
          <el-row class="mar-top-30">
            <el-col class="flex-row-plus" :span="4" :offset="10">
              <el-button
                class="submitBut"
                @click="checkUserPhone" type="primary"
              >下一步</el-button>
            </el-col>
          </el-row>
        </div>
        <div v-if="activeStep == 1">
          <el-row class="mar-top-30">
            <el-col :span="8" :offset="8">
              <el-input class="codeipt" v-model="phoneForm.phoneNumber" maxlength="11" placeholder="输入新号码" oninput="value=value.replace(/[^\d]/g,'')" />
            </el-col>
          </el-row>
          <el-row class="mar-top-30">
            <el-col class="flex-row-plus" :span="5" :offset="8">
              <el-input class="codeipt" v-model="phoneForm.code" maxlength="6" placeholder="验证码" />
            </el-col>
            <el-col class="flex-row-plus" :span="3">
              <el-button
                v-if="codeSetting.isCodeShow"
                class="codebut"
                @click="getCode"
              >{{ codeSetting.codeText }}</el-button
              >
              <el-button v-else class="codebut codeDisable" type="primary">{{
                codeSetting.codeText
              }}</el-button>
            </el-col>
          </el-row>
          <el-row class="mar-top-30">
            <el-col class="flex-row-plus" :span="4" :offset="10">
              <el-button class="submitBut" @click="updatePhone" type="primary"
              >提交</el-button
              >
            </el-col>
          </el-row>
        </div>
        <div v-if="activeStep == 2" style="margin:70px 0">
          <el-row>
            <el-col :span="8" :offset="8" style="text-align:center;margin-bottom:20px;">
              <svg-icon style="font-size: 120px; margin-bottom: 20px;" name="success" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="8" style="text-align:center;">
              <span>恭喜您，更换手机已完成！</span>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer class="mar-top-50">
        <el-row class="flex-column-plus mar-20-30">
          <span class="fs8" style="color:#C83732;font-size:16px;">安全服务提示</span>
          <span class="mar-top-20 fs7 font-color-9A9"
          >•
            绑定手机可提高帐号安全性</span
          >
          <span class="mar-top-10 fs7 font-color-9A9"
          >• 一个手机号只能绑定一个帐号</span
          >
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>
<script setup>
import { defineComponent, reactive, shallowRef, toRefs } from 'vue'
import { useUser } from '@/store/user'
import ShopStep from '@/components/base/steps.vue'
import SvgIcon from '@/components/svgIcon/index.vue'
import {
  getTheCode
} from '@/api/login.js'
import {
  changePhone,
  checkUser
} from '@/api/user/user.js'

defineComponent({
  name: 'ChangeInfo'
})
const userStore = useUser()
const { userInfo } = toRefs(userStore)
const stepsArr = [
  {
    value: 0,
    label: '身份验证'
  },
  {
    value: 1,
    label: '更换手机号码'
  },
  {
    value: 2,
    label: '完成'
  }
]
const activeStep = shallowRef(0);
const phoneForm = reactive({
  verifyCode: '',
  phoneNumber: '', // 新手机号
  code: '',
})
// // this.phone = this.verifyIphone.substr(0, 3) + '****' + this.verifyIphone.substr(7, this.verifyIphone.split('').length)
// 已绑定的手机号

const phoneReg = new RegExp(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/);
const codeSetting = reactive({
  cutTime: 60,
  isoldCodeShow: true,
  oldcodeText: '获取验证码',
  oldtime: 60,

  codeText: '获取验证码',
  time: 60,
  isCodeShow: true,
})


// 获取更换手机号的验证码
function getCode () {
  if (!(phoneReg.test(phoneForm.phoneNumber))) {
    ElMessage.warning('手机号格式错误请重新输入')
    return
  }
  getTheCode({
    phone: phoneForm.phoneNumber
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      ElMessage.success('验证码获取成功')
      timer()
    }
  })
}
// 身份验证
function checkUserPhone () {
  if (!phoneForm.verifyCode) {
    ElMessage.warning('验证码不能为空')
    return
  }
  checkUser({
    phone: userInfo.value.phone,
    verificationCode: phoneForm.verifyCode
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      activeStep.value = 1
    } else {
      ElMessage.warning(res.message)
    }
  }).catch(err => ElMessage.error(err.message))
}
// 获取身份验证的验证码
function getoldCode () {
  if (!(phoneReg.test(userInfo.value.phone))) {
    ElMessage.warning('手机号格式错误')
    return
  }
  getTheCode({
    phone: userInfo.value.phone
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      ElMessage.success('验证码获取成功')
      oldtimer()
    } else {
      ElMessage.warning(res.message)
    }
  }).catch(err => ElMessage.error(err.message))
}
// 获取更换手机号的验证码倒计时
function oldtimer () {
  if (codeSetting.oldtime > 0) {
    codeSetting.oldtime--
    codeSetting.oldcodeText = codeSetting.oldtime + 's'
    codeSetting.isoldCodeShow = false
    setTimeout(oldtimer, 1000)
  } else {
    codeSetting.oldtime = codeSetting.cutTime
    codeSetting.oldcodeText = '获取验证码'
    codeSetting.isoldCodeShow = true
  }
}

// 更改手机号
function updatePhone () {
  if (!(phoneReg.test(phoneForm.phoneNumber))) {
    ElMessage.warning('手机号格式错误请重新输入')
    return
  }
  if (phoneForm.code === '') {
    ElMessage.warning('验证码不能为空')
    return
  }
  changePhone({
    phone: phoneForm.phoneNumber,
    verificationCode: phoneForm.code
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      activeStep.value = 2
    } else {
      ElMessage.warning(res.message)
    }
  }).catch(err => ElMessage.error(err.message))
}
// 获取身份验证的验证码倒计时
function timer () {
  if (codeSetting.time > 0) {
    codeSetting.time--
    codeSetting.codeText = codeSetting.time + 's'
    codeSetting.isCodeShow = false
    setTimeout(timer, 1000)
  } else {
    codeSetting.time = 0
    codeSetting.codeText = '获取验证码'
    codeSetting.isCodeShow = true
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-sizing: border-box;
  border: 1px solid #E5E5E5;
  .el-header{
    padding: 0;
    .title{
      padding: 0 30px;
      line-height: 50px;
      background-color: #FAFAFA;
    }
  }
  .submitBut {
    width: 400px;
    color: $mainGlod;
    background-color: #333;
    border-radius: 0;
  }
  .codebut {
    padding: 13px 20px;
    width: 100%;
    text-align: center;
    color: #FFF;
    background-color: $mainGlod;
    border-radius: 0;
  }
  .codeDisable{
    color: #999;
    cursor: auto;

  }
  .codeipt{
    :deep(.el-input__wrapper){
      border-radius: 0 !important;
    }
  }
  .bottom-box {
    background-color: #eeeeee;
  }
  :deep(.el-footer){
      background-color: #eee;
      height: auto !important;
  }
}
</style>
